import React, { useState } from 'react';
import { Button, Col, Form, Input, Row, Space, Upload, message } from 'dw-mx';
import { InboxOutlined } from 'dw-mx-icons';
import { request } from 'dw-mx-request';

const { Dragger } = Upload;

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

export default function ExpertsDefend() {
    const [form] = Form.useForm();
    const [fileList, setFileList] = useState([]);
    const [uploadid, setUploadId] = useState([]);

    const handleChange = (info) => {
        const fileList = info.fileList;
        const status = info.file.status;
        if (status == 'done') {
            message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status == 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
        setFileList(fileList);
    };

    const customRequest = (option) => {
        const formdata = new FormData();
        formdata.append('singlefile', option.file, option.file.name);
        formdata.append('xm', '张三');
        request(`/sef1/mx/test/fileupload`, formdata, {
            onUploadProgress: ({ total, loaded }) => {
                option.onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, option.file);
            },
        })
            .then((res) => {
                option.onSuccess(res, option.file);
                uploadid.push(res);
            })
            .catch((res) => {
                option.onError(res);
            });
    };

    const onClick = () => {
        console.log({ ...form.getFieldsValue(), uploadid });
    };

    const handleRemove = (file) => {
        for (let i = 0; i < uploadid.length; i++) {
            if (uploadid[i] == file.response) {
                uploadid.splice(i, 1);
            }
            break;
        }
    };

    return (
        <div>
            <Form form={form} {...layout} layout={'horizontal'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="姓名" name="name">
                            <Input placeholder={'姓名'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="电话号码" name="phone">
                            <Input placeholder={'电话号码'} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Row justify={'end'}>
                            <Space>
                                <Button onClick={onClick}>提交</Button>
                            </Space>
                        </Row>
                    </Col>
                    <Col span={24}>
                        <Dragger name="singlefile" multiple={true} customRequest={customRequest} onChange={handleChange} fileList={fileList} onRemove={handleRemove}>
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
                        </Dragger>
                    </Col>
                </Row>
            </Form>
        </div>
    );
}
